<template>
  <div class="dd">
    <div class="tabList">
      <el-menu
        :default-active="activeIndex"
        class="el-menu-demo"
        mode="horizontal"
        @select="handleSelect"
      >
        <el-menu-item index="1">登录日志</el-menu-item>
        <el-menu-item index="2">操作日志</el-menu-item>
        <el-menu-item index="3">操作统计</el-menu-item>
      </el-menu>
    </div>
    <div class="tabCon">
			<LoginLog v-show="activeIndex == 1"></LoginLog>
			<OperateLog v-show="activeIndex == 2"></OperateLog>
      <OperaStatistics v-if="activeIndex == 3"></OperaStatistics>
		</div>
  </div>
</template>

<script>
import LoginLog from '@/components/LoginLog.vue';
import OperateLog from '@/components/OperateLog.vue';
import OperaStatistics from '@/components/OperaStatistics.vue';
import { mapActions, mapState } from 'vuex';
export default {
  name: "LogManage",
	components:{
		LoginLog,
		OperateLog,
    OperaStatistics
	},
  data() {
    return {
      activeIndex: "1",
      list: [
        {
          denName: "asd",
          momentWater: "123",
          rName: "asd",
          rTel: "12345678991",
          rSex: "男",
          accountstate: "0",
          country: "China",
          flag: "",
        },
      ],
      pageInfo:{
        pageNo:1,
        pageSize:10
      }
    };
  },
  methods: {
    ...mapActions('log',['actionGetLoginLog']),
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
			this.activeIndex = key
			console.log(this.activeIndex)
    },
  },
  computed:{
    ...mapState('log',['loginLogList'])
  },
  mounted(){
    // this.actionGetLoginLog(this.pageInfo)
  }
};
</script>

<style lang="less" scoped>
.tabList {
  width: 100%;
  ::v-deep .el-menu.el-menu--horizontal {
    width: 100% !important;
    border: none;
  }
  .el-menu--horizontal .el-menu-item:not(.is-disabled):focus {
    background-color: transparent;
    border-color: #00e7e7;
    color: #00e7e7;
  }
  .el-menu--horizontal .el-menu-item:not(.is-disabled):hover {
    color: #00e7e7;
    border-color: #00e7e7;
    background-color: transparent;
  }
  .el-menu--horizontal > .el-menu-item.is-active {
    border-bottom: 2px solid #00e7e7;
    color: #00e7e7;
  }
}
.tabCon{
  width: 100%;
  height: calc(100% - 60px);
  box-sizing: border-box
}
@import "../../../assets/style/table.less";
</style>